<script>
import {
  getActiveOrderDetail,
  getCancleOrder,
  getDeleteOrder,
  getServerPhone,
} from "@/config/api";
import { payTransactions } from "@/utils";

const ticketOrderStatus = {
  "1_1": "待支付",
  "1_2": "待支付",
  "2_1": "支付成功",
  "2_2": "支付成功",
  "3_1": "已取消",
  "3_2": "已取消",
  "4_1": "已核销",
  "4_2": "已核销",
  "5_1": "已发货",
  "5_2": "已提货",
  "6_1": "已退款",
  "6_2": "已退款",
};

export default {
  props: ["id"],
  data() {
    return {
      info: {},
      time: 0,
    };
  },
  computed: {},
  onLoad() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      return getActiveOrderDetail({
        orderId: this.id,
      }).then(({ code, data: info }) => {
        if (code !== 200) {
          info = {};
        }
        let _info = {};
        let addressDetail = info.addressDetail.split("@@");
        _info.address = addressDetail[0];
        _info.addressDetail = addressDetail[1];
        console.log('addressDetail',addressDetail)
        _info.addressIsDefault =JSON.parse( addressDetail[2]);  // 字符穿的 true 和false 特殊处理一下

        _info.orderStatus = Number(info.orderStatus) || 3;
        _info.toShowOrderStatus =
          ticketOrderStatus[`${_info.orderStatus}_${info.addressType}`];

        this.info = {
          ...info,
          ..._info,
        };
        if (
          this.info.orderStatus === 1 &&
          (this.info.residueTimeNum || 0) > 0
        ) {
          this.time = this.info.residueTimeNum;
        }
      });
    },
    goPay(orderId) {
      return payTransactions(orderId)
        .then(() => {
          this.toURL(
            "/page_mall/result/index",
            { state: 1, id: orderId },
            { type: "redirect" }
          );
        })
        .catch(({ code }) => {
          this.toURL(
            "/page_mall/result/index",
            { state: 0, id: orderId },
            { type: "redirect" }
          );
        });
    },
    finishTime() {
      this.getDetail();
    },
    // 取消订单
    cancelOrder() {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要取消该订单吗？",
        success(res) {
          if (res.confirm) {
            getCancleOrder({
              _id: _this.id,
            }).then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: "已取消", icon: "none" });
                _this.toURL(
                  "",
                  { reload: true, updateId: _this.id, action: "取消" },
                  { type: "back" }
                );
              }
            });
          }
          if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    deleteOrder() {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要删除该订单吗？",
        success(res) {
          if (res.confirm) {
            getDeleteOrder({
              _id: _this.id,
            }).then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: "已删除", icon: "none" });
                _this.toURL(
                  "",
                  { reload: true, updateId: _this.id, action: "删除" },
                  { type: "back" }
                );
              }
            });
          }
          if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    callPhone() {
      if (this.isSubmitting) return;
      this.isSubmitting = true;
      getServerPhone({
        orderId: this.id,
        orderType: "4",
      }).then((res) => {
        if (res.code === 200) {
          this.toURL(res.msg, {}, { type: "phone" });
        } else {
          uni.showToast({ title: "暂无联系电话", icon: "none" });
        }
        this.isSubmitting = false;
      });
    },
    showOrderStatusTxt(value) {
      switch (value) {
        case "2_1":
          return `我们会尽快为您发货`;
        case "2_2":
          return `请在自提点运营时间内，前往自提点取货`;
        case "3_1":
        case "3_2":
          return `该订单已取消，欢迎再次下单`;
        case "4_1":
        case "4_2":
          return `已核销`;
        case "5_1":
        case "5_2":
          return `欢迎下次光临～`;
        case "6_1":
        case "6_2":
          return `该订单已取消并退款，欢迎再次下单`;
      }
    },
  },
};
</script>

<template>
  <view class="order-detail">
    <view class="status-title">{{ info.toShowOrderStatus }}</view>
    <view class="status-text" v-if="info.orderStatus === 1">
      <u-count-down
        :time="time"
        format="mm 分 ss 秒后订单自动取消"
        autoStart
        @finish="finishTime"
      ></u-count-down>
    </view>
    <view class="status-text" v-else>
      {{ showOrderStatusTxt(`${info.orderStatus}_${info.addressType}`) }}
    </view>
    <view class="user-info-box" v-if="info.addressType == 1">
      <view class="address">
        {{ info.address }}
        <text class="isDefault" v-if="info.addressIsDefault">默认</text>
      </view>
      <view class="address-desc">
        {{ info.addressDetail }}
      </view>
      <view>
        <text class="name">{{ info.deliveryName }}</text>
        <text class="phone">{{ info.deliveryPhone }}</text>
      </view>
      <view v-if="info.orderTcode" class="orderTcode">
        <text class="pick-up-text">快递单号</text>
        <view>
          {{ info.orderTcode }}
        </view>
      </view>
    </view>
    <view class="user-info-box pick-up" v-if="info.addressType == 2">
      <view class="address-desc">
        <text class="pick-up-text">自提点</text>
        <view>
          {{ info.address + info.addressDetail }}
        </view>
      </view>
      <view>
        <text class="pick-up-text">预留信息</text>
        <text class="name">{{ info.deliveryName }}</text>
        <text class="phone">{{ info.deliveryPhone }}</text>
      </view>
    </view>

    <view class="shop-info">
      <view class="shop-left" v-if="false">
        <view class="shop-avatar"></view>
        <text class="shop-title">{{ info.detaildVoList[0].commonName }}</text>
      </view>
      <view class="goods-list">
        <view
          class="info-box"
          v-for="(volist, index) in info.detaildVoList"
          :key="index"
        >
          <view class="left">
            <u-image
              :src="img_api + volist.goodPic"
              width="160rpx"
              height="160rpx"
            ></u-image>
          </view>
          <view class="right">
            <view class="title">{{ volist.ticketName }}</view>
            <view class="shop-desc" v-if="volist.typeName">
              {{ volist.typeName }}
            </view>
            <view class="price-num-box">
              <view class="num">x {{ volist.ticketCount }}</view>
              <view class="price">
                ¥{{ Number(`${volist.ticketMoney}e-2`).toFixed(2) }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="freight-box" v-if="info.addressType == 1">
        <view class="freight-label">运费</view>
        <view class="freight-text">
          ¥{{ Number(`${info.postagePrice}e-2`).toFixed(2) }}
        </view>
      </view>
      <view class="freight-box pay-num-box">
        <text class="pay-num-label">
          {{ info.orderStatus === 1 ? "应付金额" : "实付金额" }}
        </text>
        <text class="pay-num">
          ¥{{ Number(`${info.orderTotalPrice}e-2`).toFixed(2) }}
        </text>
      </view>
    </view>
    <view class="order-info">
      <view class="item">
        <text class="order-label">订单编号</text>
        <text class="order-text">{{ info.orderNum }}</text>
      </view>
      <view class="item">
        <text class="order-label">下单时间</text>
        <text class="order-text">{{ info.orderTime }}</text>
      </view>
      <view class="item" v-if="info.payTime">
        <text class="order-label">支付时间</text>
        <text class="order-text">{{ info.payTime }}</text>
      </view>
      <view class="item" v-if="info.refundTime">
        <text class="order-label">退款时间</text>
        <text class="order-text">{{ info.refundTime }}</text>
      </view>
    </view>
    <view class="btn-box" v-if="info.orderStatus === 1">
      <view class="cancel-order" @click="cancelOrder">取消订单</view>
      <view class="go-pay" @click="goPay(id)">去支付</view>
    </view>
    <view
      class="btn-box"
      v-if="info.orderStatus === 2 || info.orderStatus === 5"
    >
      <view class="contact-service" @click="callPhone">联系客服</view>
    </view>
    <view
      class="btn-box"
      v-if="info.orderStatus === 3 || info.orderStatus === 6"
    >
      <view class="contact-service" @click="deleteOrder">删除订单</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.order-detail {
  padding-bottom: env(safe-area-inset-bottom);

  .status-title {
    padding: 24rpx 40rpx 8rpx;
    font-size: 40rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 56rpx;
  }

  .status-text {
    padding: 0 40rpx 32rpx;
    font-size: 24rpx;
    font-weight: 250;
    color: rgba(0, 0, 0, 0.5);
    line-height: 34rpx;
  }

  &::v-deep .u-count-down__text {
    font-size: 24rpx;
    font-weight: 250;
    color: rgba(0, 0, 0, 0.5);
    line-height: 34rpx;
  }

  .user-info-box {
    margin: 0 32rpx 32rpx;
    background: #faf9f8;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;

    &.pick-up {
      .address-desc {
        font-size: 28rpx;
        line-height: 40rpx;
      }

      .name {
        font-weight: 600;
        color: rgba(0, 0, 0, 0.8);
        padding-right: 16rpx;
      }

      .phone {
        font-weight: 600;
        color: rgba(0, 0, 0, 0.8);
      }
    }
  }

  .orderTcode {
    display: flex;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    line-height: 40rpx;
    padding-top: 24rpx;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 24rpx;

    .pick-up-text {
      margin-right: 48rpx;
    }
  }

  .address {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    line-height: 32rpx;
    padding-bottom: 8rpx;
  }

  .isDefault {
    margin-left: 16rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #fff201;
    line-height: 32rpx;
    padding: 0 8rpx;
    background: #ff5000;
    border-radius: 2rpx;
  }

  .pick-up-text {
    flex: none;
    margin-right: 24rpx;
    min-width: 4em;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    line-height: 32rpx;
  }

  .address-desc {
    font-size: 32rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    line-height: 44rpx;
    padding-bottom: 24rpx;
    display: flex;
  }

  .name {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    line-height: 40rpx;
    padding-right: 24rpx;
  }

  .phone {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    line-height: 40rpx;
  }

  .shop-info {
    margin: 0 32rpx;

    .shop-left {
      display: flex;
      margin-bottom: 32rpx;
      padding: 4rpx 0;
    }

    .shop-avatar {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }

    .shop-title {
      font-size: 28rpx;
      font-weight: 400;
      color: #777f8f;
      line-height: 40rpx;
    }

    .info-box {
      display: flex;
      align-items: center;
      padding: 40rpx 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      &:last-of-type {
        border-bottom: none;
      }
    }

    .left {
      flex: none;
      width: 160rpx;
      height: 160rpx;
      margin-right: 24rpx;
    }

    .right {
      flex: auto;
      height: 160rpx;
      display: flex;
      flex-flow: column nowrap;

      .title {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
        line-height: 44rpx;
      }

      .shop-desc {
        background: #f9f4f2;
        padding: 4rpx 8rpx;
        border-radius: 2rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 32rpx;
        margin-top: 16rpx;
        align-self: flex-start;
      }

      .price-num-box {
        height: 44rpx;
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .num {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 44rpx;
      }

      .price {
        font-size: 32rpx;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.8);
        line-height: 34rpx;
        padding-top: 2rpx;
      }
    }

    .freight-box {
      margin-left: 184rpx;
      padding: 40rpx 0;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;

      & + .freight-box {
        border-top: none;
      }

      .freight-label {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 40rpx;
      }

      .freight-text {
        font-size: 32rpx;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.8);
        line-height: 34rpx;
        padding-top: 2rpx;
      }
    }

    .pay-num-box {
      margin-left: 184rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .pay-num-label {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 40rpx;
      }

      .pay-num {
        font-size: 32rpx;
        font-weight: 700;
        color: #ff5000;
        font-family: D-DIN-Bold;
        line-height: 34rpx;
        padding-top: 2rpx;
      }
    }
  }

  .order-info {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 40rpx;

    .item {
      padding-bottom: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:last-of-type {
        padding-bottom: 0;
      }
    }

    .order-label {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 40rpx;
    }

    .order-text {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
      line-height: 40rpx;
    }
  }

  .btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(124rpx + env(safe-area-inset-bottom));
    background: #ffffff;
    box-shadow: 0 14rpx 58rpx 0 rgba(100, 100, 111, 0.2);
    padding: 0 32rpx calc(4rpx + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .cancel-order {
      width: 240rpx;
      height: 80rpx;
      background: #ffffff;
      border-radius: 44rpx;
      border: 2rpx solid rgba(0, 0, 0, 0.1);
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.7);
      line-height: 40rpx;
      margin-right: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .go-pay {
      width: 422rpx;
      height: 80rpx;
      background: #ff5000;
      border-radius: 44rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .contact-service {
      width: 240rpx;
      height: 80rpx;
      background: #ffffff;
      border-radius: 44rpx;
      border: 2rpx solid rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.7);
      line-height: 40rpx;
    }
  }
}
</style>
